<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <el-form :model="dataForm" ref="dataForm" :rules="dataFormRules" label-width="80px">
            <el-form-item label="登录名" prop="userName">
                <el-input v-model="dataForm.userName"></el-input>
            </el-form-item>

            <el-form-item label="真实名称" prop="realName">
                <el-input v-model="dataForm.realName"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="sysRoleNames">
                <el-input v-model="sysRoleNames" disabled="true"></el-input>
            </el-form-item>
            <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="dataForm.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="头像" prop="avatar" style="margin-right: 50%">
                    <el-upload class="avatar-uploader" :action="uploadUrl" :headers="uploadHeaders" :data="uploadData"
                               :show-file-list="false"
                               :on-success="handleAvatarSuccess.bind(this,'head')" :before-upload="beforeAvatarUpload">
                        <el-avatar v-if="dataForm.avatar" :src="dataForm.avatar"></el-avatar>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </div>

            <el-form-item label="出生日期" prop="birthDate">
                <el-date-picker v-model="dataForm.birthDate" type="date" placeholder="选择日期"
                                style="width:100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="dataForm.phone" maxlength="11"></el-input>
            </el-form-item>

            <el-form-item label="地址">
                <el-input v-model="dataForm.address"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center;margin-right: 100px">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
            </el-form-item>

        </el-form>
    </template>
</div>
</body>

<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/user.js}"></script>
<script th:src="@{/static/api/login.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>


<script>

    new Vue({
        el: '#app',
        data() {
            return {
                buttons: [],
                editableTabsValue: '',
                systemName: '',
                searchText: '',
                currentTime: '',
                editableTabs: [],
                avatar: '',
                uploadUrl: '/common/upload/file',
                uploadHeaders: '',
                sysRoleNames: '',
                uploadData: {'module': '1'},
                dataForm: {
                    id: '',
                    sex: '',
                    birthDate: '',
                    phone: '',
                    province: '',
                    realName: '',
                    city: '',
                    area: '',
                    address: '',
                    avatar: ''
                },
                dataFormRules: {
                    sex: [
                        {required: true, message: '请选择', trigger: 'blur'}
                    ],
                    birthDate: [
                        {required: true, message: '请选择', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 11, max: 11, message: '手机号码格式不正确', trigger: 'blur'}
                    ]
                },
            }
        },
        created() {
            getUserInfo({}).then((res) => {
                if (res.code === '200') {
                    this.loading = false;
                    this.sysUser = JSON.parse(JSON.stringify(res.data.sysUser));
                    this.sysMenu = JSON.parse(JSON.stringify(res.data.sysMenu));
                    this.dataForm = JSON.parse(JSON.stringify(res.data.sysUser));
                    this.sysRoleNames = res.data.sysRolesName;
                    this.parseTreeJson(res.data.sysMenu);
                    this.avatar = this.sysUser.avatar;
                    localStorage.setItem("avatar", this.avatar)
                    localStorage.setItem("userId", this.sysUser.id)
                    localStorage.setItem("mars-sysMenu", JSON.stringify(res.data.sysMenu))
                    localStorage.setItem("mars-sysUser", JSON.stringify(res.data.sysUser))
                    localStorage.setItem('mars-sysButtons', JSON.stringify(this.buttons));
                    this.addTab('首页', '/home/home.html');
                } else {
                    this.loading = false;
                }
            }).then(() => {

            });
        },
        methods: {
            cancel() {
                let index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            },
            handleAvatarSuccess(idx, res, file, name) {
                if (res.code === '200') {
                    console.log(res)
                    this.dataForm.avatar = res.data;
                }
            },
            beforeAvatarUpload(file) {
                let isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过2MB!');
                }
                return isLt2M;
            },
            parseTreeJson(treeNodes) {
                for (let i = 0; i < treeNodes.length; i++) {
                    if (treeNodes[i].url) {
                        this.buttons.push(treeNodes[i].url);
                    }
                    let child = treeNodes[i].children;
                    if (child && child.length > 0) {
                        this.parseTreeJson(child);
                    }
                }
            },
            addTab(tabName, tabUrl) {
                let isExist = false;
                this.editableTabs.forEach((tab, index) => {
                    if (tab.title === tabName) {
                        isExist = true;
                        return;
                    }
                });
                if (isExist) {
                    this.editableTabsValue = tabUrl;
                    return;
                }
                let prefix = '';
                this.editableTabs.push({
                    title: tabName,
                    name: tabUrl,
                    content: prefix + tabUrl
                });
                this.editableTabsValue = tabUrl;
                location.hash = '' + this.editableTabsValue;
            },
            dataFormSubmit() {
                this.$refs.dataForm.validate((valid) => {
                    if (valid) {
                        this.dataDialog = false;
                        let param = this.dataForm;
                        requests.post('/updateInfo', JSON.parse(JSON.stringify(param)))
                            .then((res) => {
                                if (res.code === '200') {
                                    let sysUser = JSON.parse(localStorage.getItem("mars-sysUser"));
                                    localStorage.setItem('mars-sysUser', JSON.stringify(sysUser));
                                    parent.layer.msg('修改成功');
                                    setTimeout(() => {
                                        this.cancel()
                                    }, 500)

                                } else {
                                    this.$message.error(res.message);
                                }
                            });
                    } else {
                        return false;
                    }
                });
            },
        }
    });
</script>
<style>
</style>
</html>
